<template>
  
    <div class="container">
        <header>
            用户注册
        </header>
        <div class="context">
            <div class="phone">
                <span>手机号码：</span>
                <input placeholder="手机号码">
            </div>
            <div class="password">
                <span>密码：</span>
                <input placeholder="密码">
            </div>
            <p @click="loginToIndex()">登录</p>
            <button @click="register()">去注册</button>
        </div>
    </div>
    

</template>

<script>
import Footer from '@/components/Footer.vue'


export default {
    components:{
        Footer
    },
    methods: {
        register(){
            this.$router.push('/register');
        },
        loginToIndex(){
            this.$router.push('/index');
        }

    }
}

</script>



<style scoped>

.container{
    margin: 0;
    padding: 0;
}
.container header{
    width: 100%;
    height: 12vw;
    background-color: bisque;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4.8vw;
}

input{
    margin: 0;
    padding: 0;
}

.container .context{
    width: 100%;
}
.container .context div{
    display: flex;
    justify-content: left;
    align-items: center;
    margin-left: 3vw;
    padding: 4vw 3vw 0 3vw;
}

.container .context  .phone span{
    flex: 0 0 18vw;
    font-size: 3vw;
    font-weight: 700;
    color: #666;
}

input{
    border: none;
    outline: none;
}

.container .context  .phone input{
    margin-left: 1vw;
}

.container .context  .password input{
    margin-left: 1vw;
}

.container .context  .password span{
    flex: 0 0 18vw;
    font-size: 3vw;
    font-weight: 700;
    color: #666;
}

.container .context p{
    width: 95%;
    height: 10vw;
    font-size: 3.8vw;
    font-weight: 700;
    color: #fff;
    background-color: #38CA73;
    border-radius: 4px;
    border: none;
    outline: none;
    text-align: center;
    line-height: 9.8vw;
    margin: 5vw auto;
    
}

.container .context button{
    width: 95%;
    height: 10vw;
    font-size: 3.8vw;
    font-weight: 700;
    color: #666;
    background-color: #EEE;
    border-radius: 4px;
    border: none;
    outline: none;
    text-align: center;
    line-height: 9.8vw;
    margin: 2vw auto;
    display: flex;
    justify-content: center;
    align-items: center;
}



</style>